<template>
  <el-container>
    <el-breadcrumb separator>
      <!-- <el-breadcrumb-item>角色管理</el-breadcrumb-item> -->
      <el-form label-width="120px" class="form-fliter" @submit.native.prevent>
        <!--高级检索-->
        <div class="searchDiv">
          <div class="dataSearch" style="margin-top:17vh;margin-right:8px">
            <el-select v-model="ruleForm.typeList" multiple placeholder="请选择角色状态">
              <el-option
                v-for="item in ruleroptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>

          <div class="dataSearch" style="margin-top:17vh">
            <el-input
              type="text"
              v-model="searchName"
              placeholder="请输入角色名称"
              clearable
              @keyup.enter.native="search"
            >
              <i
                @click="search"
                style="color:#0090ff;font-size:14px"
                class="iconfont icon-sousuo"
                slot="suffix"
              ></i>
            </el-input>
          </div>

          <!-- <span style="margin-top:17vh" class="high-search" v-on:click.stop="doCollapse">
            高级搜索
            <i :class="collapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
          </span>-->

          <el-button style="width:88px;margin-top:17vh" class="def-btn-sty" @click="clearData">重置</el-button>
          <div class="checkDiv" v-if="collapse" id="myPanel">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
              <el-form-item label="角色状态：">
                <el-checkbox-group v-model="ruleForm.typeList">
                  <el-checkbox label="0001" name="type">正常</el-checkbox>
                  <el-checkbox label="0002" name="type">过期</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <div class="mr-btn">
              <el-button type="primary" @click="search('close')">确定</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </el-breadcrumb>
    <!-- <el-breadcrumb class="input-num-reserach" v-if="searchName || ruleForm.typeList.length != 0">
      <div>
        <span v-if="searchName">{{ searchName}}<span class="x-handel" @click="deleteSelectHandel('1', searchName)">x</span></span>
        <span v-for="(val, index) in ruleForm.typeList" :key="index">
          <span v-if="val == '0001'">正常<span class="x-handel" @click="deleteSelectHandel('2', val)">x</span></span>
          <span v-if="val == '0002'">过期<span class="x-handel" @click="deleteSelectHandel('2', val)">x</span></span>
        </span>
      </div>
    </el-breadcrumb>-->
    <div class="mr-btn operate-sty">
      <el-button type="primary" class="golable-sty-btn" @click="addUserVisible">新增角色</el-button>
      <el-button class="def-btn-sty golable-sty-btn" @click="deleteRole('', true)">删除</el-button>
    </div>
    <el-main style="margin-top:30px">
      <el-table
        style="background-color:#fff;"
        :data="roleList"
        class="mt-20"
        stripe
        v-loading="loading"
        @selection-change="handleSelectionChange"
        height="calc(100vh - 200px)"
      >
        <el-table-column fixed type="selection" width="40"></el-table-column>
        <el-table-column fixed label="序号" type="index" width="60" :index="indexMethod"></el-table-column>
        <el-table-column fixed prop="roleName" label="角色名称" align="left" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column
          prop="securityLevelName"
          label="安全等级"
          show-overflow-tooltip
        ></el-table-column>-->
        <el-table-column label="角色期限" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.roleLimit | formatDate }}</template>
        </el-table-column>
        <el-table-column prop="roleState" label="角色状态" show-overflow-tooltip></el-table-column>
        <el-table-column label="权限设置" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="权限查看" placement="top">
              <i
                style="color:#0090ff"
                @click="viewAuthority(scope.row)"
                class="iconfont icon-sousuo"
              ></i>
            </el-tooltip>&nbsp;&nbsp;
            <el-tooltip class="item" effect="light" content="权限设置" placement="top">
              <i style="color:#0090ff" @click="setRole(scope.row)" class="iconfont icon-shezhi"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="编辑" placement="top">
              <i
                @click="editHandel(scope.row)"
                style="color:#0090ff"
                class="iconfont icon-xiugaibianji"
              ></i>
            </el-tooltip>&nbsp;&nbsp;
            <el-tooltip class="item" effect="light" content="删除" placement="top">
              <i style="color:#0090ff" class="iconfont icon-shanchu" @click="deleteRole(scope.row)"></i>
            </el-tooltip>&nbsp;&nbsp;
            <el-tooltip class="item" effect="light" content="详情" placement="top">
              <i
                style="color:#0090ff"
                class="iconfont icon-wenbenxiangqing"
                @click="viewRole(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div class="clearfix enc-pagination" style="padding:10px">
        <el-pagination
          class="mr-btn"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, jumper,sizes,total"
          :total="total"
        ></el-pagination>
      </div>
    </el-footer>

    <!--增加角色-->
    <add-role v-if="dialogVisible" ref="addRole" @callBack="addRoleCallBack"></add-role>

    <!--更改权限-->
    <change-role v-if="dialogRoleVisible" ref="changeRole" @callBack="dialogRoleVisible = false"></change-role>
    <!--角色详情-->
    <role-view v-if="viewRoleVisible" ref="viewRole" @callBack="viewRoleVisible = false"></role-view>
    <!--权限查看-->
    <authorityDialog v-if="authorityVisible" ref="authority" @callBack="authorityVisible = false"></authorityDialog>
  </el-container>
</template>

<script>
import addRole from "@/views/rolesManagement/addRole";
import changeRole from "@/views/usersManagement/changeRole";
import authorityDialog from "@/views/authorityManage/authorityManageDialog";
import roleView from "@/views/rolesManagement/roleView";
import { getRoleList, deleteRole } from "@/api/roleApi.js";
import { formatDate } from "@/filters/index";
export default {
  components: {
    addRole,
    changeRole,
    authorityDialog,
    roleView
  },
  data() {
    return {
      searchName: "",
      collapse: false,
      dialogVisible: false,
      dialogRoleVisible: false,
      viewRoleVisible: false,
      authorityVisible: false,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      roleList: [],
      ruleForm: {
        typeList: [],
        levelList: []
      },
      deleteData: [],
      loading: false,
      ruleroptions: [
        {
          value: "0001",
          label: "正常"
        },
        {
          value: "0002",
          label: "过期"
        }
      ]
    };
  },
  watch: {
    "ruleForm.typeList": {
      deep: true,
      handler: function() {
        this.currentPage = 1;
        this.getRoleInfoList();
      }
    },
    $route(to, from) {
      if (to.name == "roleManagement") {
        this.getRoleInfoList();
      }
    }
  },
  created() {
    this.getRoleInfoList();
    document.addEventListener("click", e => {
      var sp = document.getElementById("myPanel");
      if (sp) {
        if (!sp.contains(event.target)) {
          this.collapse = false;
        }
      }
    });
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRoleInfoList();
    },
    deleteSelectHandel(type, val) {
      if (type == "1") {
        this.searchName = "";
      }
      if (type == "2") {
        this.ruleForm.typeList.forEach((v, index) => {
          if (v == val) {
            this.ruleForm.typeList.splice(index, 1);
          }
        });
      }
      this.getRoleInfoList();
    },
    //查询所有角色
    getRoleInfoList() {
      this.loading = true;
      let params = {
        search: this.searchName,
        isValid: "",
        secruityLevel: "",
        sort: "-creation_time",
        page: this.currentPage,
        per_page: this.pageSize
      };
      if (
        this.ruleForm.typeList.length !== 0 &&
        this.ruleForm.typeList.length !== 2
      ) {
        params.isValid = this.ruleForm.typeList[0] === "0001" ? true : false;
      }
      getRoleList(params).then(res => {
        this.loading = false;
        if (res) {
          this.total = res.total;
          this.roleList = res.list;
        }
      });
    },
    //打开新增角色窗口
    addUserVisible() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addRole.openDialogVisible();
      });
    },
    //打开高级检索
    doCollapse() {
      this.collapse = !this.collapse;
    },
    //高级检索查询
    search(type) {
      this.currentPage = 1;
      if (type === "close") {
        this.collapse = !this.collapse;
      }
      this.getRoleInfoList();
    },
    // 重置
    clearData() {
      debugger;
      this.searchName = "";
      this.ruleForm.typeList = [];
      this.getRoleInfoList();
    },
    //角色编辑
    editHandel(val) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addRole.openDialogVisible("edit", val);
      });
    },
    handleSelectionChange(val) {
      this.deleteData = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getRoleInfoList();
    },
    addRoleCallBack() {
      this.dialogVisible = false;
      this.getRoleInfoList();
    },
    viewAuthority(val) {
      this.authorityVisible = true;
      this.$nextTick(() => {
        this.$refs.authority.openDialog({
          from: "roles",
          type: "view",
          id: val.id
        });
      });
    },
    viewRole(val) {
      this.viewRoleVisible = true;
      this.$nextTick(() => {
        this.$refs.viewRole.openDialogVisible(val);
      });
    },
    setRole(val) {
      this.authorityVisible = true;
      this.$nextTick(() => {
        this.$refs.authority.openDialog({
          from: "roles",
          type: "eidt",
          id: val.id
        });
      });
    },
    deleteRole(val, type) {
      let id = "";
      if (type) {
        //批量删除
        if (this.deleteData.length === 0) {
          this.$message.warning("请选择要删除的角色");
          return false;
        }
        this.deleteData.forEach((val, index) => {
          if (index === this.deleteData.length - 1) {
            id += val.id;
          } else {
            id += val.id + ",";
          }
        });
      } else {
        id = val.id;
      }
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "el-button--primary"
      }).then(() => {
        deleteRole(id).then(res => {
          if (res) {
            this.$message.success("删除成功");
            this.getRoleInfoList();
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    },
    mouseleave(e) {
      var o = e.relatedTarget || e.toElement;
      if (o && o != null) {
        this.collapse = !this.collapse;
      }
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    }
  },
  filters: {
    formatDate(val) {
      return formatDate(val);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.enc-pagination {
  float: right;
}
.operate-sty {
  position: absolute;
  top: 39px;
  left: 20px;
}
/deep/ {
  .el-table .cell .el-button {
    font-size: 14px;
    line-height: 18px;
    color: #409eff;
  }
  .el-table .cell .el-button :hover {
    color: #409eff;
  }
  .el-table::before {
    height: 0;
  }
  .el-footer {
    padding-right: 40px;
    margin: 0 0 0 40px;
    // background-color: #ffffff;
  }
}
.checkDiv {
  margin-top: 100px;
}
.cell-class-name {
  text-align: center !important;
}
</style>
<style lang="scss">
.el-select .el-input__inner {
  height: 36px !important;
  line-height: 36px;
}
</style>
